import React from 'react'
import browserCookie from 'browser-cookies'
import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { Modal, Result, List, WhiteSpace, Button } from 'antd-mobile'
import { logout } from '../../redux/user.redux' 

class UserCenter extends React.Component{
  logout() {
    browserCookie.erase('userid')
    this.props.logout()
  }
  render() {
    const { avatar, user, company, desc, money, title, redirectTo } = this.props
    const Item = List.Item
    const Brief = Item.Brief
    const alert = Modal.alert
    return user ? <div>
              <Result 
                img={ <img style={{width: '70px', height: '70px', borderRadius: '35px'}} src={`http://192.168.31.124:8009${avatar}`} alt="" /> }
                title={ user }
                message={ company ? <div>{ company }</div> : null }
              />
              <List
                renderHeader={ () => '简介' }
              >
                <Item
                  multipleLine
                >
                  { title }
                  { desc ? desc.split('\n').map(item => <Brief key={ item }>{ item }</Brief>) : null }
                  { money ? <Brief>薪资￥:<span style={{ fontWeight: 'bold' }}>{ money }</span></Brief> : null }
                </Item>
              </List>
              <WhiteSpace />
              <List>
                <Item>
                  <Button
                    onClick={() =>
                      alert('注销', '确认退出登录？', [
                        { text: '取消', onPress: () => console.log('cancel') },
                        { text: '确认', onPress: this.logout.bind(this) },
                      ])
                    }
                  >
                    退出登录
                  </Button>
                </Item>
              </List>
            </div>
            : <Redirect to={ redirectTo } />
  }
}

export default connect(state => state.user, { logout })(UserCenter)